{% extends "base.html" %}

{% block style %}
    <link rel="stylesheet" type="text/css" href= "/static_media/css/user/editExcursion.css">
    <link rel="stylesheet" type="text/css" href="/static_media/js/jqueryui/themes/smoothness/jquery.ui.all.css">
{% endblock style %}

{% block script %}
    <!-- JQuery -->
    <script src="/static_media/js/jquery-1.9.1.min.js"></script>
	<script src="/static_media/js/jqueryui/ui/jquery.ui.core.js"></script>
	<script src="/static_media/js/jqueryui/ui/jquery.ui.widget.js"></script>
	
	<!-- calendar -->
	<script src="/static_media/js/jqueryui/ui/jquery.ui.datepicker.js"></script>
    <script src="/static_media/js/action/datepicker.js"></script>
    
    <!-- time picker -->
	<script src="/static_media/js/jqueryui/external/jquery.mousewheel.js"></script>
	<script src="/static_media/js/jqueryui/external/globalize.js"></script>
	<script src="/static_media/js/jqueryui/external/globalize.culture.de-DE.js"></script>
    <script src="/static_media/js/jqueryui/ui/jquery.ui.button.js"></script>
	<script src="/static_media/js/jqueryui/ui/jquery.ui.spinner.js"></script>
    <script src="/static_media/js/action/timepicker.js"></script>
    
    <!-- maps -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBHPN4aDb1OTOiMkDGZcuRJd4cFd-ceXds&sensor=false"></script>
    <script type="text/javascript">
		function init()
		{
			var blueIcon = new google.maps.MarkerImage(
			  "/static_media/images/pin_blue.png",
			  new google.maps.Size(34, 55),
			  new google.maps.Point(0, 0),
			  new google.maps.Point(6, 20));
			
			var mapOptions = {
			  //center map on the UK
			  center: new google.maps.LatLng(54.6, -2.46),
			  zoom: 8,
			  mapTypeId: google.maps.MapTypeId.ROADMAP
			};
							
			var map = new google.maps.Map(document.getElementById("map"), mapOptions);
			
			{% if outcrop_list %}
			{% with outcrop_list|first as first_object %}
			map.setCenter(new google.maps.LatLng({{ first_object.latitude }}, {{ first_object.longitude }}))
			{% endwith %}
			{% endif %}
			
			var positionArray = new Array();
			var markerArray = new Array();
			var titleArray = new Array();
			
			{% for outcrop in outcrop_list %}
			positionArray.push( new google.maps.LatLng({{outcrop.latitude}}, {{outcrop.longitude}}));
			titleArray.push("{{outcrop.outcrop.name}}");
			{% endfor %}
			
			for (i=0; i<positionArray.length; i++)
			{
				markerArray.push( new google.maps.Marker({ position: positionArray[i], map: map, title: titleArray[i], icon:blueIcon }));
			}
		}
    </script>
{% endblock script %}

{% block content %}
      <!-- .left -->
      <div class="left">
		<div id="accordionMenu" class="accordion">
				<style type="text/css">
		.accordion #one:target .heading + .menuContent {
			height:{{height}}px;
		}
		</style>
				<div id="one" class="section">
					<div class ="heading"> <a href="#one">My Excursions</a> </div>
					<div class="menuContent">
						<ul>
							{% for excursion in my_excursions %}
							<li> <a href="/user/excursion/{{ excursion.pk }}/ ">{{ excursion.name }}</a> </li>
							{% endfor %}
						</ul>
					</div>
				</div>
				<div id="two" class="section">
					<div class ="heading"> <a href="#two">My Images</a> </div>
					<div class="menuContent">
						<ul>
							<li> <a href="/user/images/">My Images</a> </li>
						</ul>
					</div>
				</div>
				<div id="three" class="section">
					<div class ="heading"> <a href="#three">Create</a> </div>
					<div class="menuContent">
						<ul>
							<li> <a href="/user/new_excursion/">Excursion</a> </li>
						</ul>
					</div>
				</div>
			</div>
      </div>
      <!-- end .left -->
      
      <!-- .right -->
      <div class="right">
      		<div class="item">
           		<div class="itemHeading">
                	Excursion Information
                </div>
				<form action="/user/excursion/edit/{{excursionItem.pk}}/" method="post">
					{% csrf_token %}
					<div class="formItem">
						<div class="fieldError"> {{ excursionForm.non_field_errors }} </div>
						<label for="id_name" class="fieldHeading" >Excursion Name</label>
						<div class="fieldError"> {{ excursionForm.name.errors }} </div>
						<div class="fieldWrapper"> {{ excursionForm.name }} </div>
						<label for="id_description" class="fieldHeading" >Excursion Description</label>
						<div class="fieldError"> {{ excursionForm.description.errors }} </div>
						<div class="fieldWrapper"> {{ excursionForm.description }} </div>
						<div class ="leftColumn">
							<label for="id_date" class="fieldHeading">Date of Excursion</label>
							<div class="fieldError"> {{ excursionForm.date.errors }} </div>
							<div class="fieldWrapper"> {{ excursionForm.date }} </div>
							<label for="id_time" class="fieldHeading">Time of Excursion</label>
							<div class="fieldError"> {{ excursionForm.time.errors }} </div>
							<div class="fieldWrapper"> {{ excursionForm.time }} </div>
						</div>
						<div class ="rightColumn">
							<label for="id_public" class="fieldHeading">Visibility of Excursion</label>
							<div class="fieldError"> {{ excursionForm.public.errors }} </div>
							<div class="boolFieldWrapper"> {{ excursionForm.public }} Public</div>
							<label for="id_password" class="fieldHeading">Password for Excursion</label>
							<div class="fieldError"> {{ excursionForm.password.errors }} </div>
							<div class="fieldWrapper"> {{ excursionForm.password }} </div>
						</div>
					</div>
                    <input type="submit" value="Save Changes" id="saveButton" class="button"/>
				</form>
		   </div>
           <div class="item">
           		<div class="itemHeading">
                	Outcrops Linked To This Excursion
                </div>
                <div class="leftColumn">
                	<div id="outcropList">
                        <ul>
                        {% for outcrop in outcrop_list %}
                            <li> <a href="/outcrop/{{outcrop.pk}}/{{excursionItem.pk}}/">{{outcrop.name}}</a> </li>
                        {% endfor %}
                        </ul>
                    </div>
                </div>
                <div class="rightColumn">
                	<div id="map">
                    </div>
                </div>
                <form action="/user/excursion/{{excursionItem.pk}}/add_outcrop/" method="get" class="formItem">
               		<input type="submit" value="Add Outcrop" id="addOutcropButton" class="button"/>
                </form>
		   </div>
      </div>
      <!-- end .right -->

{% endblock content %}
